<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content pd">
      <mh-header headName="申请红娘"> </mh-header>
      <div class="panel base-info mh-pd">
        <h4>基本资料</h4>
        <div class="info-row flex">
          <span class="panel-label">ID</span>
          <span class="panel-val" v-text="baseInfo.id">-</span>
        </div>
        <div class="info-row flex">
          <span class="panel-label">昵称</span>
          <span class="panel-val" v-text="baseInfo.nickname">-</span>
        </div>
        <div class="info-row flex">
          <span class="panel-label">性别</span>
          <span class="panel-val" v-text="baseInfo.sex">-</span>
        </div>
        <div class="info-row flex">
          <span class="panel-label">居住地</span>
          <span class="panel-val" v-text="baseInfo.province">-</span>
        </div>
        <div class="info-row flex">
          <span class="panel-label">婚姻状况</span>
          <span class="panel-val" v-text="baseInfo.marriage === 1 ? '已婚':'未婚'">-</span>
        </div>
      </div>

      <div class="panel base-info mh-pd">
        <h4>红娘类别</h4>
        <div class="options-row">
          <div class="opt"
               :class="{active: item.type === chooseMakerType}"
               v-for="item in matchMakerType"
               @tap="chooseType(item.type)"
          >
            <span v-text="item.name">红娘类别</span>
          </div>
        </div>
        <div class="tip">
          <h4><img src="../../assets/images/ico/ic_tip.png" alt="图标">类别说明</h4>
          <p>行业红娘是指红娘所从事的行业，具有广泛的人脉和单身人士， 申请前请在个人资料填写行业类别 </p>
        </div>
      </div>

      <div class="panel base-info mh-pd">
        <h4>实名认证</h4>
        <div class="photo flex-bt">
          <div class="photo-box positive mui-text-center">
            <div class="upload-box">
              <div class="upload-ico"></div>
            </div>
            <p class="up-label">手持身份证正面照片</p>
            <p class="up-tip">（人像清晰，证件完整）</p>
          </div>

          <div class="photo-box negative mui-text-center">
            <div class="upload-box">
              <div class="upload-ico"></div>
            </div>
            <p class="up-label">手持身份证反面照片</p>
            <p class="up-tip">（文字清晰，四角齐全）</p>
          </div>
        </div>
        <div class="question-row">
          <h4><img src="../../assets/images/ico/ic_p_question.png" alt="图标">为什么要认证</h4>
          <p>行业红娘是指红娘所从事的行业，具有广泛的人脉和单身人士， 申请前请在个人资料填写行业类别</p>
        </div>
        <div class="question-row">
          <h4><img src="../../assets/images/ico/ic_p_secrete.png" alt="图标">关于隐私安全</h4>
          <p>行业红娘是指红娘所从事的行业，具有广泛的人脉和单身人士， 申请前请在个人资料填写行业类别</p>
        </div>

        <div class="mui-content-padded">
          <button type="button" class="mui-btn-block mh-btn" @tap='submit'>提交申请</button>
        </div>

      </div>
    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header';
  import {MH_API} from "@/api/api";
  export default {
    name: "applicate-matchmaker",
    data () {
      return {
        baseInfo: {
          id: '2195967040',
          nickname: '买女孩的小火柴',
          sex: '女',
          live: '北京东城区',
          marriage: 1
        },
        matchMakerType: [
          {
            type: 1,
            name: '区块红娘'
          },
          {
            type: 2,
            name: '车友红娘'
          },
          {
            type: 3,
            name: '同乡红娘'
          },
          {
            type: 4,
            name: '行业红娘'
          },
          {
            type: 5,
            name: '校园红娘'
          },
          {
            type: 6,
            name: '企业红娘'
          },
          {
            type: 7,
            name: '区块红娘'
          },
          {
            type: 8,
            name: '区块红娘'
          }
        ],
        chooseMakerType: 1
      }
    },
    methods: {
      chooseType (t) {
        this.chooseMakerType = t;
      },
      submit(){
        let self = this;
        MH_API.applyHong({
          type: self.chooseMakerType
        }).then(res => {
          if (res.status === 200) {
            mui.toast("申请成功");
            setTimeout(function(){
              self.$router.push({path: '/maker/matcher'})
            }, 1500)
          }
          else{
            mui.toast(res.msg)
          }
        })
      }
    },
    components: {
      MhHeader
    },
    created(){
      let self = this;
      MH_API.getUserInfo({
        id: window.localStorage.getItem("userid")
      }).then(res => {
        if (res.status === 200) {
          self.baseInfo = res.data;
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .panel {
    background-color: #fff;
    @include sc(1.4rem, #333);
    h4 {@include sc(1.4rem, #333);}
    .panel-label {color: #aaa;}
    .panel-val {color: #666;}
  }
  .base-info {border-bottom: 1px solid #eee;}
  .info-row {
    margin: .8rem 0;
    span {flex: 1;}
  }
  .options-row {width: 100%;}
  .opt {
    display: inline-block;
    width: 50%;
    margin-top: .8rem;
    @include sc(1.4rem, #666);
    &:after {
      display: inline-block;
      content: '';
      width: 1.5rem;
      height: 1.5rem;
      margin-left: 1.5rem;
      background: url('../../assets/images/ico/ic_vo_uncheck.png') no-repeat center center;
      background-size: 100% 100%;
      vertical-align: bottom;
    }
    &.active {
      &:after {
        background: url('../../assets/images/ico/ic_vo_check.png') no-repeat center center;
        background-size: 100% 100%;
      }
    }
  }

  .tip {
    h4 {
      padding: 1rem 0;
      @include sc(1.4rem, #666);
      img {height: 1.6rem;width: auto;margin-right: .4rem;}
    }
  }

  .photo {margin: 1rem 0;}
  .photo-box {
    width: 100%;
    .up-label {@include sc(1.2rem, #666);}
    .up-tip {@include sc(1.1rem, #999);}
  }
  .upload-box {
    position: relative;
    width: 100%;
    height: 10.4rem;
    background: url("../../assets/images/bg/bg_card.png") no-repeat center center;
    background-size: 100% 100%;
    .upload-ico {
      @include center;
      width: 4.8rem;
      height: 4.8rem;
      background: rgba(0,0,0,.5) url("../../assets/images/ico/ic_p_camera.png") no-repeat center center;
      background-size: 50% 40%;
      border-radius: 100%;
    }
  }
  .positive {margin-right: 1rem;}
  .question-row {
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
    h4 {
      padding: 0 0 .8rem 0;
      img {
        height: 1.25rem;
        width: auto;
        margin-right: .5rem;
      }
    }
  }
  .mui-content-padded {margin-top: 3rem;}

</style>
